<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册 - Boss直聘数据平台</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        .register-container {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            max-width: 450px;
            width: 100%;
        }

        .register-header {
            background: linear-gradient(45deg, #4361ee, #3a0ca3);
            color: white;
            padding: 30px;
            text-align: center;
        }

        .register-body {
            padding: 30px;
        }

        .form-control {
            border-radius: 10px;
            padding: 12px 15px;
            border: 2px solid #e9ecef;
            transition: all 0.3s;
        }

        .form-control:focus {
            border-color: #4361ee;
            box-shadow: 0 0 0 0.2rem rgba(67, 97, 238, 0.25);
        }

        .btn-register {
            background: linear-gradient(45deg, #4361ee, #3a0ca3);
            border: none;
            border-radius: 10px;
            padding: 12px;
            color: white;
            font-weight: 600;
            transition: all 0.3s;
        }

.btn-register:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(67, 97, 238, 0.4);
        }

        .password-strength {
            height: 5px;
            margin-top: 5px;
            border-radius: 5px;
            transition: all 0.3s;
        }

        .strength-weak { background: #dc3545; width: 33%; }
        .strength-medium { background: #ffc107; width: 66%; }
        .strength-strong { background: #28a745; width: 100%; }
    </style>
</head>
<body>
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-6">
            <div class="register-container">
                <div class="register-header">
                    <h2><i class="fas fa-user-plus me-2"></i>注册新账户</h2>
                    <p class="mb-0">创建您的Boss直聘数据平台账户</p>
                </div>
                <div class="register-body">
                    <form id="registerForm">
                        <div class="mb-3">
                            <label class="form-label">用户名</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fas fa-user"></i></span>
                                <input type="text" class="form-control" name="username" placeholder="请输入用户名"
                                       required minlength="3" maxlength="20">
                            </div>
                            <small class="text-muted">用户名长度3-20个字符</small>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">邮箱地址</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fas fa-envelope"></i></span>
                                <input type="email" class="form-control" name="email" placeholder="请输入邮箱地址"
                                       required>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">密码</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fas fa-lock"></i></span>
                                <input type="password" class="form-control" name="password" id="password"
                                       placeholder="请输入密码" required minlength="6">
                            </div>
                            <div class="password-strength" id="passwordStrength"></div>
                            <small class="text-muted">密码长度至少6位</small>
                        </div>
                        <div class="mb-4">
                            <label class="form-label">确认密码</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fas fa-lock"></i></span>
                                <input type="password" class="form-control" name="confirmPassword"
                                       placeholder="请再次输入密码" required>
                            </div>
                            <small class="text-danger" id="passwordMatchError"
                                   style="display: none;">两次输入的密码不一致</small>
                        </div>
                        <button type="submit" class="btn btn-register w-100 mb-3">注册</button>
                        <div class="text-center">
                            <a href="/login" class="text-decoration-none">已有账户？立即登录</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // 密码强度检查
    document.getElementById('password').addEventListener('input', function() {
        const password = this.value;
        const strengthBar = document.getElementById('passwordStrength');

        if (password.length === 0) {
            strengthBar.className = 'password-strength';
            strengthBar.style.width = '0%';
            return;
        }

        let strength = 0;
        if (password.length >= 6) strength += 1;
        if (password.match(/[a-z]/)) strength += 1;
        if (password.match(/[A-Z]/)) strength += 1;
        if (password.match(/[0-9]/)) strength += 1;
        if (password.match(/[^a-zA-Z0-9]/)) strength += 1;

        if (strength <= 2) {
            strengthBar.className = 'password-strength strength-weak';
        } else if (strength <= 4) {
            strengthBar.className = 'password-strength strength-medium';
        } else {
            strengthBar.className = 'password-strength strength-strong';
        }
    });

    // 密码确认检查
    document.querySelector('input[name="confirmPassword"]').addEventListener('input', function() {
        const password = document.getElementById('password').value;
        const confirmPassword = this.value;
        const errorElement = document.getElementById('passwordMatchError');

        if (confirmPassword && password !== confirmPassword) {
            errorElement.style.display = 'block';
        } else {
            errorElement.style.display = 'none';
        }
    });

    // 注册表单提交
    document.getElementById('registerForm').addEventListener('submit', function(e) {
        e.preventDefault();

        const formData = new FormData(this);
        const data = Object.fromEntries(formData.entries());

        // 验证密码是否匹配
        if (data.password !== data.confirmPassword) {
            alert('两次输入的密码不一致');
            return;
        }

        // 移除确认密码字段
        delete data.confirmPassword;

        fetch('/api/register', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('注册成功！请登录');
                window.location.href = '/login';
            } else {
                alert('注册失败: ' + data.message);
            }
        })
        .catch(error => {
            alert('注册请求失败: ' + error.message);
        });
    });
</script>
</body>
</html>